<template>
<yk-space size="m" class="reply"  >
  <yk-badge is-dot :hidden="content?.isread===1" v-if="isComment">
    <yk-avatar
      size="m" style="background-color: hsl(198deg 90% 54%)"
    >{{ content?.user_name }}</yk-avatar> 
  </yk-badge>
   <yk-space dir="vertical" size="s" class="reply_main" @click="changeState">
       <div class="reply_name">
           <yk-text strong>{{ content?.user_name }}{{ content?.id }}
            <yk-badge is-dot v-if="!isComment" :hidden="content?.isread===1"></yk-badge>
           </yk-text>
           <yk-text type="third" style="font-size:12px ;">{{ getTime(content?.created_at) }}</yk-text>
       </div>
       <div>
        <yk-text v-if="content?.root_id===0 && content?.parent_id===0" type="secondary" >{{ content?.content }}</yk-text>
       <yk-text v-else-if="content?.root_id!==0 && content?.parent_id===0" type="secondary" >
        回复@{{content?.user_name}}{{content?.root_id}}:{{ content?.content }}
      </yk-text>
      <yk-text v-else type="secondary" >
        回复@{{content?.user_name}}{{content?.parent_id}}:{{ content?.content }}
      </yk-text>
       </div>
       <yk-space size="s" align="center"  v-if="isComment">
         <yk-tag type="primary" v-if="content?.article!.id!>-1">
            {{ content?.article?.title }}
         </yk-tag>
         <yk-tag v-else>
            文章已被删除
         </yk-tag>
         <yk-tag type="danger" v-show="content?.complaint!==0">举报 {{ content?.complaint }}</yk-tag>
       </yk-space>
        <IconDeleteOutline class="reply_main-delete" @click.stop="deleteReply(props.content!.id)"/>
   </yk-space>
    
</yk-space>
</template>
<script setup lang="ts">
import type { ReplyProps } from "./reply"
import {getTime } from "../../utils/time"
const props = withDefaults(defineProps<ReplyProps>(), {
    isComment: true,
    content:Object,
})
const emits = defineEmits(['delete','toRead'])

//删除
const deleteReply = (id:number) => {
    emits("delete",id)
}

//改变评论状态
const changeState = () => {
   emits("toRead",props.content!.id)
}


</script>
<style scoped lang="less">
.reply{
  width: 100%;
&_main{
  border-bottom: 1px solid @line-color-s;
  width: 100%;
  padding-bottom:@space-l ;
  &-delete{
    position: absolute;
    right: 20px;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: @font-color-s;
    display:none;
  }
}
    &_name{
       display: flex;
       flex-direction: column;
    }
    &:hover{
      .reply_main-delete{
        display: block;
      }
    }
}
</style>